<template>
  <div class="index_page">
    <y-header />
    <div class="bg-wrap2" style="min-height: calc(100vh - 150px );">
      <y-choose :class-list="categoryList" :current-id="obj.categoryId" :search-key="obj.courseName" />
      <div class="list-ctn" style="margin-bottom: 20px;">
        <div v-if="pageObj.list.length > 0" class="container">
          <div class="list">
            <ul class="clearfix">
              <one-course v-for="(obj, idx) in pageObj.list" :key="idx" :obj="obj" :idx="idx" />
            </ul>
          </div>
          <d-page :page="pageObj" @btnClick="getPage" />
        </div>
        <el-empty v-else description="空空如也" />
      </div>
    </div>
    <!-- <bottom /> -->
    <y-tap />
  </div>
</template>
<script>
import YHeader from '@/components/common/Header'
import YChoose from '@/components/common/CourseChoose.vue'
import DPage from '@/components/common/Page'
import YTap from '@/components/common/Top'
import { courseList } from '~/api/course.js'
import { categoryList } from '~/api/main.js'
import { courseChange } from '~/utils/commonfun.js'
import OneCourse from '@/pages/course/OneCourse.vue'
import '@/assets/css/index.css'
// import Bottom from '@/components/common/Bottom'

export default {
  components: {
    // Bottom,
    YHeader,
    YChoose,
    OneCourse,
    DPage,
    YTap
  },
  async asyncData(context) {
    const dataObj = {}
    dataObj.websiteInfo = context.store.state.websiteInfo
    let categoryId = context.query.categoryId || ''
    if (context.query.categoryTwoId) {
      categoryId = context.query.categoryTwoId
    }
    if (context.query.categoryThreeId) {
      categoryId = context.query.categoryThreeId
    }
    const courseName = context.query.courseName || ''
    const initSearchObj = {
      pageCurrent: 1,
      pageSize: 20,
      categoryId,
      courseName
    }
    console.log('initSearchObj', initSearchObj)
    try {
      const allData = await Promise.all([courseList(initSearchObj), categoryList()])
      // 课程分页
      dataObj.pageObj = allData[0]
      // console.log('pageObj', dataObj.pageObj)
      // 分类
      dataObj.categoryList = await allData[1]
      dataObj.obj = {
        pageCurrent: initSearchObj.pageCurrent,
        pageSize: initSearchObj.pageSize
      }
      return dataObj
    } catch (e) {
      context.error({ message: 'Data not found', statusCode: 404 })
    }
  },
  data() {
    return {
      // categoryId: '', // 当前分类ID
      // categoryList: []
    }
  },
  head() {
    return {
      title: '课程中心-' + this.$store.state.websiteInfo.websiteName,
      meta: [
        {
          hid: 'keywords',
          name: 'keywords',
          content: this.$store.state.websiteInfo.websiteKeyword
        },
        {
          hid: 'description',
          name: 'description',
          content: this.$store.state.websiteInfo.websiteDesc
        }
      ]
    }
  },
  watch: {
    '$route'() {
      courseChange(this)
      this.getCourse()
    }
  },
  created() {
    // const path = this.$route.path // 先获取路由路径
    // this.$router.push(path)
    // courseChange(this)
    // this.getCourse()
    // console.log('categoryList', this.categoryList)
  },
  methods: {
    getCourse() {
      if (this.obj.categoryId === '') {
        delete this.obj.categoryId
      }
      if (this.obj.courseName === '') {
        delete this.obj.courseName
      }
      // this.$nuxt.$loading.start()
      courseList(this.obj).then(res => {
        // this.$nuxt.$loading.finish()
        if (res) {
          this.pageObj = res
        } else {
          this.pageObj = {}
        }
      }).catch(() => {
        // this.$nuxt.$loading.finish()
        this.$msgBox({
          content: '数据加载失败，请稍后重试',
          isShowCancelBtn: false
        })
      })
    },
    getPage(int) {
      // window.scrollTo(0, 0)
      this.obj.pageCurrent = int
      this.getCourse()
    }
  }
}
</script>
